// 栅格布局一份的宽度大小
@--grid-quantity--: 100% / 12;

.col-1 {
    width: @--grid-quantity--;
    padding: 0;
}

.col-2 {
    width: calc(@--grid-quantity-- * 2);
    padding: 0;

}

.col-3 {
    width: calc(@--grid-quantity-- * 3);
    padding: 0;

}

.col-4 {

    width: calc(@--grid-quantity-- * 4);
    padding: 0;
}

.col-5 {

    width: calc(@--grid-quantity-- * 5);
    padding: 0;

}

.col-6 {
    width: calc(@--grid-quantity-- * 6);
    padding: 0;

}

.col-7 {
    width: calc(@--grid-quantity-- * 7);
    padding: 0;

}

.col-8 {
    width: calc(@--grid-quantity-- * 8);
    padding: 0;

}

.col-9 {
    width: calc(@--grid-quantity-- * 9);
    padding: 0;

}

.col-10 {
    width: calc(@--grid-quantity-- * 10);
    padding: 0;

}

.col-11 {
    width: calc(@--grid-quantity-- * 11);
    padding: 0;

}

.col-12 {
    width: calc(@--grid-quantity-- * 12);
    padding: 0;
}

// 上下左右垂直居中
.up-down-center {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

// 动画
.animation-size-inflation {
    animation: inflation .2s;
    // 动画结束之后保持原样
    animation-fill-mode: both;
}

@keyframes inflation {
    0% {

        transform: scale(1);

    }

    25% {

        transform: scale(1.1);

    }

    50% {

        transform: scale(1.2);

    }

    75% {

        transform: scale(1.1);

    }

    100% {
        transform: scale(1);

    }
}